<!--
 * @Author: your name
 * @Date: 2021-12-27 18:04:36
 * @LastEditTime: 2022-01-03 16:09:08
 * @LastEditors: Please set LastEditors
 * @FilePath: /caict-web/src/views/gisPage/thematic-research/index.vue
-->
<template>
  <div class="thematic-research-card" id="thematic-research-card">
    <div
      v-for="(item, index) in tabList"
      :key="index"
      :class="`activity-content ${item.disabled ? '' : 'pointer'}`"
      :style="`width:${getWidth}px;height:${getHeight(getWidth)}px;`"
      @click="gotoGis(item.disabled, item.path)"
    >
      <img :src="item.bgIcon" class="bg-content" />
      <div class="item-content" :style="`font-size:${getFontSize}px`">
        <img
          :src="item.icon"
          class="item-icon"
          :style="`height:${getIconHeight(getHeight(getWidth))}px;`"
        />
        <div class="item-label" :style="`font-size:${getLabelFontSize}px`">
          {{ item.label }}
        </div>
        <div :class="`item-describe-box ${item.className}`">
          <div v-html="item.describe"></div>
          <div v-if="item.describe2" class="item-ending">
            {{ item.describe2 }}
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import { mapState } from 'vuex'
// import gisMap from '@/views/gisPage/gisMap/content/index.vue'
export default {
  data() {
    return {
      tabList: [
        {
          icon: require('../images/festival-icon.png'),
          bgIcon: require('../images/festival-bg-icon.png'),
          label: '春促',
          className: '',
          rules: 'springPromotion',
          describe:
            '每年的新年、春节是中国人传统回家流动的日子，大批在外务工人提前收拾行囊准备（正在）踏上回家的行程 <br/>这也是运营商的重要机会…… ',
          describe2: '于是，“春促”来了',
          disabled: false
        },
        {
          icon: require('../images/new-icon.png'),
          bgIcon: require('../images/new-bg-icon.png'),
          label: '新增用户分析',
          rules: 'newUserAnalysis',
          path: '/gisPage/thematic-analyse',
          className: '',
          describe:
            '分析日新增用户和线上发卡数量，根据分析结果针对性实施相应的策略，是占领用户市场的机会，也是保护用户市场的手段',
          describe2: '于是，“新增用户分析“功能上线了',
          disabled: false
        },
        {
          icon: require('../images/holidays-icon.png'),
          bgIcon: require('../images/holidays-bg-icon.png'),
          label: '节假日',
          className: 'item-box-research',
          describe: '功能正在研发中，敬请期待...',
          disabled: true
        }
      ],
      offsetWidth: 0
    }
  },
  mounted() {
    this.offsetWidth = document.getElementById(
      'thematic-research-card'
    ).offsetWidth
    const authorityString = this.home.userInfoVo.authorityString
    const authorityList = authorityString ? authorityString.split(',') : []
    this.tabList.forEach(item => {
      if (item.rules) {
        item.disabled = true
        console.log(
          authorityList,
          item.rules,
          authorityList.includes(item.rules)
        )
        if (authorityList.includes(item.rules)) {
          item.disabled = false
        }
      }
    })
  },
  methods: {
    // 跳转到GIS页面
    gotoGis(disabled, path) {
      console.log(path)
      if (!disabled && !path) {
        this.$router.push({
          path: '/gisPage/thematic-research'
        })
        // window.location.reload()
      }
      if (!disabled && path) {
        this.$router.push({
          path
        })
      }
    }
  },
  beforeDestroy() {
    // window.location.reload()
  },
  computed: {
    ...mapState(['home']),
    getWidth() {
      const offWidth = this.offsetWidth
      const threeW = 411 * 3 + 350
      const w = offWidth
        ? offWidth >= threeW
          ? 411
          : (offWidth - 350) / 3
        : 200
      return w
    },
    getHeight() {
      return function (w) {
        return (w * 377) / 411
      }
    },
    getIconHeight() {
      return function (h) {
        return (100 / 377) * h - 10
      }
    },
    getLabelFontSize() {
      const offWidth = this.offsetWidth
      return offWidth <= 1260 ? 20 : offWidth <= 1340 ? 24 : 26
    },
    getFontSize() {
      const offWidth = this.offsetWidth
      return offWidth <= 1240 ? 12 : offWidth <= 1340 ? 14 : 16
    }
  }
}
</script>
<style lang="scss" scoped>
.thematic-research-card {
  display: flex;
  justify-content: space-around;
  height: 100%;
  background-image: url(../images/bg-container.png);
  background-repeat: no-repeat;
  background-size: cover;
  align-items: center;
  .pointer {
    cursor: pointer;
  }
  .pointer:hover {
    transform: scale(1.2);
  }

  .activity-content {
    position: relative;
    .bg-content {
      position: absolute;
      width: 100%;
      height: 100%;
    }
    .item-content {
      position: relative;
      color: #fff;
      padding: 25px;
      font-family: SimHei;
      font-weight: 500;
      height: 100%;
      display: flex;
      flex-direction: column;
      line-height: 1.5;
      .item-icon {
        margin: auto;
      }
      .item-label {
        font-size: 26px;
        font-weight: bolder;
        text-align: center;
        padding: 15px 0;
      }
      .item-ending {
        padding-top: 15px;
      }
      .item-describe-box {
        display: flex;
        flex-direction: column;
        align-items: flex-start;
        flex: 1;
        justify-content: flex-end;
      }
      .item-box-research {
        justify-content: center !important;
        align-items: center !important;
      }
    }
  }
}
</style>
